Ajax Toolkit UpdatePanel Control in ASP.Net
UpdatePanel control is a central part of ASP.NET AJAX functionality. This is used with ScriptManager control to enable partial rendering of the page. You must be aware that partial page rendering reduces the need for synchronous postbacks and complete page updates when a part of the page needs to be updated.
Syntax:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
UpdatePanel properties:
ChildControlsCreated |
Gets or sets a value that indicates whether the server control's child control has been created. |
ChildrenAsTriggers |
Gets or sets a value that indicates whether postback from immediate child controls of an UpdatePanel control updates the panel's content. |
ClientID |
Gets the server control identifier generated by ASP.NET |
ContentTemplate |
Gets or sets the template that defines the content of the UpdatePanel control. You need to place the content of the page that you want to be in the UpdatePanel inside this. |
EnableViewState |
Gets or sets a value (true/false) that indicates whether the server control persists its and its child control view state. |
IsInPartialRendering |
Gets or sets a value (true/false) that indicates whether UpdatePanel control is being updated as a result of asynchronous postbacks. |
Triggers |
Gets an UpdatePanelTriggerCollection object that contains AsyncPostBackTrigger and PostBackTrigger objects that were registered for the UpdatePanel control. |
UpdateMode |
Gets or sets a value (Always/Conditional) that indicates when UpdatePanel controls content is updated. Always: Update the content of the UpdatePanel irrespective of any postback. Conditional: Update the content of the UpdatePanel when control triggers associated with this UpdatePanel. |
Example:
Default.aspx
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<%--You need to place content of the page that you want to be in the UpdatePanel inside this--%>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<%--Triggers is used because The UpdatePanel and ScriptManager knows that only this part of the page has to be updated.--%>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
<div>
<br/><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
Label2.Text = TextBox1.Text;
}
Run the Project
When you click the submit button then text entered in the textbox will show in the label without postback because these controls are inside update panel. The time which is displayed on the page will change when the page will refresh but when you click submit then time will not change because the submit button is inside an update panel and the update panel always does partially postback.
Leave Comment